<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      #app {
        position: relative;
        height: 100%;
      }
      #login_show {
        background-image: url("../../day 01/第一天练习/img/理想国.png");
        background-size: cover;
      }
      #login_show,
      #body_show {
        height: 100%;
      }
      fieldset {
        width: 350px;
        height: 200px;
        position: absolute;
        border-color: #409eff;
        border: 3px solid #409eff;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        padding: 20px;
        text-align: center;
        color: #fff;
        border-radius: 8px;
      }
      button {
        color: #fff;
        background-color: #409eff;
        border-color: #409eff;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        width: 310px;
        padding: 12px 20px;
        font-size: 14px;
        border-radius: 4px;
        margin-top: 30px;
      }
      input {
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        margin-top: 15px;
        background-color: #0000;
        outline: none;
        border: 0;
        border: 2px solid #409eff;
        vertical-align: sub;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--展示区域-->
      <div id="body_show" v-if="isLogin">
        <h1>列表展示</h1>
        <h2>昵称:{{userInfo.nickname}}</h2>
        <img :src=userInfo.headimgurl alt="" width="100">
        <button @click="getList">点击获取列表数据</button>
        <button @click="isLogin = false">退出登入</button>
        <ul>
            <li v-for="item of lists" :key="item._id">
                {{item.description}}
                <button v-has:read="permission">查看</button>
                <button v-has:edit="permission">修改</button>
                <button v-has:delete="permission">删除</button>
                <button v-has:add="permission">增加</button>
            </li>
        </ul>
       
      </div>
      <!--登入界面-->
      <div id="login_show" v-else>
        <fieldset>
          <legend style="text-align: center; font-weight: 700; padding: 0 10px">
            请登入
          </legend>
          <div class="login">
            <p>
              <label for="username">username:</label>
              <input type="text" id="username"  v-model="username"/>
            </p>
            <p>
              <label for="password">password:</label>
              <input type="text" id="password" v-model="password" @keydown.13="login()"/>
            </p>
            <p>
              <button @click="login()">GO</button>
            </p>
          </div>
        </fieldset>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
      //通过自定义属性来实现按钮鉴权
      //需求分析
      //1、登入界面 页面加载时候展示展示界面
      //2、登入失败提示
      //3、登入成功根据todos数据展示列表
      //4、根据登入角色权限 展示对应角色按钮的权限

      //接口地址：http://chst.vip/users/login
      //请求方式:post
      //携带参数username  password
      //请求头  application/json

      //定义登入请求的方法

      //请求身份证token
      //请求服务器的数据
      //token是有时效的 
      //请求的时候携带在请求头里
      //authorization code
      //令牌存在sessionStorage中

      /**
       * 声明按钮的全局自定义指令
       * 
      */
     Vue.directive("has",{
         inserted(el,binding){
             console.log(el);
            //  el.style.display = "none";
             //includes(需要判断的值？)
             //有就返回true or false
             console.log(binding);
             let role = binding.arg;
             let userRole = binding.value;
             let hasRole = userRole.includes(role);
             if(!hasRole){
                //没有权限就让他消失
                el.style.display = "none"
                //还可以让他禁用
             }
         }
     })
      const loginApi = (params={})=>{
        return fetch("http://chst.vip/users/login",{
            method:"post",
            headers:{
                "content-type":"application/json"
            },
            body:JSON.stringify(params)
        })
        .then(res=>res.json())
        .catch(err => err.toString())
      };
      //获取列表的请求
      //http://chst.vip/students/getstulist
      const getLists = ()=>{
           return fetch("http://chst.vip/students/getstulist?count=10",{
               headers:{
                'authorization':sessionStorage.getItem("user-token")
               }
           })
           .then(res => res.json())
           .catch(err => err.toString())
      }
      const vm = new Vue({
        el: "#app",
        data: {
          isLogin: false, //看是否登入
          username:"",
          password:"",
          userInfo:{},
          lists:[],
          //权限按钮
          permission:[]
        },
        methods: {
            //登入请求
            async login(){
                let obj = {
                    username:this.username,
                    password:this.password
                }
                if(!obj.username || !obj.password){
                    alert("此字段不能为空！！！");
                    return;
                }
                //等一下后端的数据过来
                let res = await loginApi(obj);
                console.log(res);
                if(res.state){
                     this.isLogin = true;
                     this.userInfo = res.userInfo;
                     //将用户的令牌存在本地
                     sessionStorage.setItem("user-token",res.token);
                     this.permission = res.permission.buttons
                }else{
                    alert(res.msg);
                }
            },
            //获取列表
            //
           async getList(){
              let res = await getLists();
              //判断是否请求成功
                if(res.state){
                    this.lists = res.data;
                }else{
                    console.log(res.msg);
                }
            }
        },
      });
    </script>
  </body>
</html>
